<template>
  <el-card class="box-card">
    <template #header>
      <span style="display: block;font-size: 20px; margin-bottom: 20px;">编辑公告</span>
    </template>
    <div>
      <span>通知信息</span>
      <el-form :data="List" label-width="80px">
        <el-form-item style="margin-top: 10px;" props="title" label="药品标题">
          <el-input style="width: 722px;" v-model="editText.title" size="large" placeholder="请输入文章标题"></el-input>
        </el-form-item>
        <el-form-item label="消息内容" style="display: flex;justify-content: center;align-items: center;">
          <el-input style="width: 600px;height: 200px;" v-model="editText.content"></el-input>
        </el-form-item>
        <el-form-item label="发布时间">
          <el-date-picker style="width:252px" v-model="value2" type="datetime" placeholder="请选择发布时间"
            :shortcuts="shortcuts" />
        </el-form-item>
        <el-form-item label="接收人">
          <el-button link type="primary" @click="addRoles">
            <el-icon>
              <Plus />
            </el-icon>
            选择接收人
          </el-button>
          <el-table :data="announcementData.result">
            <el-table-column label="编号" prop="id"></el-table-column>
            <el-table-column label="头像">
              <template #default="scope">
                <el-image style="width: 50px; height: 50px" :src="`http://127.0.0.1:3000/${scope.row.picture}`"
                  fit="fill" />
              </template>
            </el-table-column>
            <el-table-column property="dname" label="姓名"></el-table-column>
            <el-table-column property="tel" label="联系电话"></el-table-column>
            <el-table-column property="rname" label="角色"></el-table-column>
            <el-table-column property="tname" label="所属团队"></el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="消息状态">
          <el-text>{{ editText.status }}</el-text>
        </el-form-item>
        <el-form-item label="发布人">
          <el-text>{{ editText.publisher }}</el-text>
        </el-form-item>
        <el-form-item label="编辑时间">
          <el-text>{{ editText.time }}</el-text>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitText">保存</el-button>
          <el-button type="danger" @click="deleteText">删除</el-button>
          <el-button @click="cancleReturn">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
  <el-dialog v-model="dialogTableVisible" title="选择接收医生">
    <el-table :data="announcementData.result" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column property="number" label="编号" width="120" />
      <el-table-column property="picture" label="头像" width="90">
        <template #default="scope">
          <el-image style="width: 50px; height: 50px" :src="`http://127.0.0.1:3000/${scope.row.picture}`" fit="fill" />
        </template>
      </el-table-column>
      <el-table-column property="dname" label="名称" />
      <el-table-column property="tel" label="电话" width='120px' />
      <el-table-column property="rname" label="角色" />
      <el-table-column property="tname" label="所属团队" width="150px" />
    </el-table>
    <template #footer>
      <el-button @click="cancleDialog">取消</el-button>
      <el-button type="primary" @click="submitDialog">确定</el-button>
    </template>
  </el-dialog>
</template>

<script lang='ts' setup>
import { reactive, onMounted, ref } from 'vue'
import api from '@/api'
import { saveArticleType } from '@/types/ccc/article'
import { UploadFile, ElMessage } from 'element-plus'
import format from '@/utils/ccc/format'
import { useRouter } from 'vue-router'
import { LabelSearchType } from '@/types/ccc/lable'
const List = JSON.parse(localStorage.getItem('item'))


const editText = reactive({
  title: List.title,
  selectType: List.type,
  time: List.updateTime,
  num: List.collectNum,
  content: List.content,
  status: List.status,
  publisher: List.publisher,
  collectNum: List.collectNum,
  shareNum: List.shareNum,
  specifications: List.specifications
})
console.log(editText);
const articleList = reactive<LabelSearchType>({
  searchKey: '',
  page: 1,
  count: 10
})
const announcementData = reactive({
  total: 0,
  pageTotal: 0,
  result: []
})

const getArticle = async () => {
  const result = await api.systemSetting.announcement.getDoctorByPageSearchApi(articleList)
  console.log(result);

  if (result.data.code === 200) {
    console.log(result.data.data);
    announcementData.result = result.data.data
  }
}
onMounted(() => {
  getArticle()

})







const saveList = reactive<saveArticleType>({
  id: List.id,
  title: '',
  publisher: '李明明',
  publishTime: '',
  content: '',
  updateTime:''
})
// const getPictureName = (file: UploadFile) => {
//   console.log(file);
//   saveList.picture = `public/upload/${file.name}`
// }

const value2 = ref<object>(List.publishTime)
const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]
const submitText = async () => {
  console.log(1);
  console.log(editText);
  if (value2.value) {
    saveList.title = editText.title
    saveList.publishTime = format(value2.value)
    saveList.content = editText.content
    saveList.updateTime=format(new Date())
    const result = await api.systemSetting.announcement.updateAnnouncementByIdApi(saveList)
    if (result.data.code === 200) {
      ElMessage.success(result.data.msg)
    } else {
      ElMessage.warning(result.data.msg)
    }
  }
  console.log(saveList);
  // console.log(form.value.noticeContent);
}
const router = useRouter()
const deleteText = () => {
  editText.title = ''
  value2.value = ''
  editText.content = ''
  

  getArticle()

}
const cancleReturn = () => {
  router.replace('/home/system/xtgg')
}

const dialogTableVisible = ref(false)
const addRoles = () => {
  dialogTableVisible.value = true
}
let arr: any = []
const handleSelectionChange = (e: any) => {
  console.log(e);
  e.forEach((item: any) => {
    arr.push(item.dname)
  })

}
const submitDialog = () => {
  console.log(arr)
  saveList.doctors = arr.toString()
  console.log(saveList.doctors);
  dialogTableVisible.value = false
}
const cancleDialog = () => {
  arr = []
  dialogTableVisible.value = false
}

</script>

<style lang='scss' scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 12px;
  color: #989797;
  margin-left: 15px;
}
</style>